<template>
  <el-dialog
    ref="dialog"
    :close-on-click-modal="false"
    custom-class="form-dialog"
    :show-close="false"
    :title="title"
    :visible.sync="dialogVisible"
    width="400px"
  >
    <el-form ref="form" label-position="top" :label-width="formLabelWidth" :model="formModel" :rules="rulesForm" :show-message="false">
      <el-form-item label="字段类型">
        <div>
          <el-radio-group v-model="formModel.type" size="mini">
            <el-radio label="text">
              <img alt="" src="@/assets/images/option-text.png" />
            </el-radio>
            <!--
            <el-radio label="select">
              <img alt="" src="@/assets/images/option-select.png" />
            </el-radio>
            -->
          </el-radio-group>
        </div>
      </el-form-item>

      <el-form-item label="变量名称" prop="varName">
        <el-input v-model="formModel.varName" placeholder="变量1" />
      </el-form-item>

      <span v-show="formModel.type === 'text'">
        <el-form-item label="显示名称" prop="showName">
          <el-input v-model="formModel.showName" placeholder="建设单位全称？" />
        </el-form-item>

        <el-form-item label="预设用户回复模板">
          <el-input v-model="formModel.model" :autosize="{ minRows: 2 }" placeholder="预设用户回复模板" type="textarea" />
        </el-form-item>

        <el-form-item label="假设内容（仅当前页测试，可不填）">
          <el-input v-model="formModel.content" placeholder="假设内容" />
        </el-form-item>
      </span>

      <span v-show="formModel.type === 'select'">
        <el-form-item
          v-for="(option, index) in formModel.options"
          :key="index"
          :label="'选项' + (index + 1)"
          :prop="'option' + (index + 1)"
        >
          <el-input v-model="option.option" placeholder="请输入" />
        </el-form-item>
        <el-button size="mini" @click="handleOptionPlus">添加选项</el-button>
      </span>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-switch v-model="formModel.required" active-text="必填" />
      <div class="button-group">
        <el-button size="mini" @click="hideDialog">取消</el-button>
        <el-button size="mini" type="primary" @click="confirm">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'Dialog',
    // model: {
    //   prop: 'form',
    //   event: 'childValueChange',
    // },
    props: {
      title: {
        type: String,
        default: '',
      },
      // form: {
      //   type: Object,
      //   default() {
      //     return {}
      //   },
      // },
    },
    data() {
      return {
        formModel: {
          type: 'text',
          varName: '',
          showName: '',
          model: '',
          content: '',
          options: [{ option: '' }],
          required: null,
        },
        formLabelWidth: '70px',
        dialogVisible: false,
        rulesForm: {
          varName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }],
          showName: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
          option1: [{ required: true, message: '请输入选项名称', trigger: 'blur' }],
        },
      }
    },
    // watch: {
    //   form() {
    //     this.formModel = JSON.parse(JSON.stringify(this.form))
    //   },
    // },
    methods: {
      handleOptionPlus() {
        // this.$emit('plus-option')
        this.formModel.options.push({ option: '' })
      },
      showDialog() {
        this.dialogVisible = true
      },
      hideDialog() {
        // this.formModel = {
        //   type: 'text',
        //   varName: '',
        //   showName: '',
        //   model: '',
        //   content: '',
        //   options: [{ option: '' }],
        //   required: null,
        // }
        this.$refs.form.resetFields()
        this.dialogVisible = false
      },
      confirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit('form-change', this.formModel)
            this.hideDialog()
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog.form-dialog {
    .el-dialog__header {
      border-top: none;
      padding: 15px 15px 0;
      font-size: 14px;
    }
    .el-dialog__body {
      border-top: none;
      padding: 15px;
      font-size: 14px;
    }
    .el-dialog__footer {
      border-top: none;
      padding: 0 10px 10px;

      .dialog-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .el-form {
      padding-right: 0;

      .el-form-item {
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }
        .el-form-item__label {
          font-size: 14px;
          line-height: unset;
          padding: 0 0 5px 0;
        }

        input.el-input__inner::placeholder,
        .el-textarea__inner::placeholder {
          font-size: 12px;
        }
      }
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
        content: ' ';
      }
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after,
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:after {
        content: '*';
        color: #f34d37;
        margin-left: 3px;
      }
    }

    .el-radio-group {
      display: flex;
      .el-radio {
        display: flex;
        align-items: center;
        .el-radio__input {
          display: none;
        }
        .el-radio__label {
          display: inline-block;
          width: 90px;
          height: 54px;
          padding-left: 0;
          border-radius: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        &.is-checked {
          .el-radio__label {
            border: 2px solid #409eff;
          }
        }
      }
    }
  }
</style>
